<!DOCTYPE html><html class=split lang=en-US-x-hixie><script src=../link-fixup.js defer=""></script>
<!-- Mirrored from html.spec.whatwg.org/multipage/webstorage.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 10 Sep 2025 08:35:56 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<meta charset=utf-8><meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name=viewport><title>HTML Standard</title><meta content=#3c790a name=theme-color><meta content="light dark" name=color-scheme><link rel=stylesheet href=../../resources.whatwg.org/standard-shared-with-dev.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/standard.css crossorigin=""><link rel=stylesheet href=../../resources.whatwg.org/spec.css crossorigin=""><link rel=icon href=https://resources.whatwg.org/logo.svg crossorigin=""><link rel=stylesheet href=../styles.css crossorigin=""><script>
   function toggleStatus(div) {
     div.parentNode.classList.toggle('wrapped');
   }
   function setLinkFragment(link) {
     link.hash = location.hash;
   }
  </script><body>
  
  <script defer="" crossorigin="" src=../html-dfn.js></script>
  
  <header id=head class="head with-buttons">
   <a href=https://whatwg.org/ class=logo><img width=100 alt=WHATWG crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/logo.svg height=100></a>
   <hgroup><h1 class=allcaps>HTML</h1><p id=living-standard>Living Standard — Last Updated <span class=pubdate>10 September 2025</span></hgroup>
   
   

   
  </header>

  

  

  

  
  

  
  

  

  <nav><a href=worklets.html>← 11 Worklets</a> — <a href=index.html>Table of Contents</a> — <a href=syntax.html>13 The HTML syntax →</a></nav><ol class=toc><li id=toc-webstorage><a href=webstorage.html#webstorage><span class=secno>12</span> Web storage</a><ol><li><a href=webstorage.html#introduction-15><span class=secno>12.1</span> Introduction</a><li><a href=webstorage.html#storage><span class=secno>12.2</span> The API</a><ol><li><a href=webstorage.html#the-storage-interface><span class=secno>12.2.1</span> The <code>Storage</code> interface</a><li><a href=webstorage.html#the-sessionstorage-attribute><span class=secno>12.2.2</span> The <code>sessionStorage</code> getter</a><li><a href=webstorage.html#the-localstorage-attribute><span class=secno>12.2.3</span> The <code>localStorage</code> getter</a><li><a href=webstorage.html#the-storageevent-interface><span class=secno>12.2.4</span> The <code>StorageEvent</code> interface</a></ol><li><a href=webstorage.html#privacy><span class=secno>12.3</span> Privacy</a><ol><li><a href=webstorage.html#user-tracking><span class=secno>12.3.1</span> User tracking</a><li><a href=webstorage.html#sensitivity-of-data><span class=secno>12.3.2</span> Sensitivity of data</a></ol><li><a href=webstorage.html#security-storage><span class=secno>12.4</span> Security</a><ol><li><a href=webstorage.html#dns-spoofing-attacks><span class=secno>12.4.1</span> DNS spoofing attacks</a><li><a href=webstorage.html#cross-directory-attacks><span class=secno>12.4.2</span> Cross-directory attacks</a><li><a href=webstorage.html#implementation-risks><span class=secno>12.4.3</span> Implementation risks</a></ol></ol></ol><h2 id=webstorage><span class=secno>12</span> Web storage<a href=#webstorage class=self-link></a></h2><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API title="The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies.">Web_Storage_API</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>6+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API title="The Web Storage API provides mechanisms by which browsers can securely store key/value pairs.">Web_Storage_API/Using_the_Web_Storage_API</a></div></div>

  <h3 id=introduction-15><span class=secno>12.1</span> Introduction<a href=#introduction-15 class=self-link></a></h3>

  <p><i>This section is non-normative.</i></p>

  <p>This specification introduces two related mechanisms, similar to HTTP session cookies, for
  storing name-value pairs on the client side. <a href=references.html#refsCOOKIES>[COOKIES]</a></p>

  <p>The first is designed for scenarios where the user is carrying out a single transaction, but
  could be carrying out multiple transactions in different windows at the same time.</p>

  <p>Cookies don't really handle this case well. For example, a user could be buying plane tickets
  in two different windows, using the same site. If the site used cookies to keep track of which
  ticket the user was buying, then as the user clicked from page to page in both windows, the ticket
  currently being purchased would "leak" from one window to the other, potentially causing the user
  to buy two tickets for the same flight without noticing.</p>

  <p>To address this, this specification introduces the <code id=introduction-15:dom-sessionstorage><a href=#dom-sessionstorage>sessionStorage</a></code> getter. Sites can add data to the session
  storage, and it will be accessible to any page from the same site opened in that window.</p>

  <div class=example>
   <p>For example, a page could have a checkbox that the user ticks to
   indicate that they want insurance:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>label</c-><c- p>&gt;</c->
 <c- p>&lt;</c-><c- f>input</c-> <c- e>type</c-><c- o>=</c-><c- s>&quot;checkbox&quot;</c-> <c- e>onchange</c-><c- o>=</c-><c- s>&quot;sessionStorage.insurance = checked ? &apos;true&apos; : &apos;&apos;&quot;</c-><c- p>&gt;</c->
  I want insurance on this trip.
<c- p>&lt;/</c-><c- f>label</c-><c- p>&gt;</c-></code></pre>

   <p>A later page could then check, from script, whether the user had checked the checkbox or
   not:</p>

   <pre><code class='js'><c- k>if</c-> <c- p>(</c->sessionStorage<c- p>.</c->insurance<c- p>)</c-> <c- p>{</c-> <c- p>...</c-> <c- p>}</c-></code></pre>

   <p>If the user had multiple windows opened on the site, each one would have its own individual
   copy of the session storage object.</p>
  </div>

  

  <p>The second storage mechanism is designed for storage that spans multiple windows, and lasts
  beyond the current session. In particular, web applications might wish to store megabytes of user
  data, such as entire user-authored documents or a user's mailbox, on the client side for
  performance reasons.</p>

  <p>Again, cookies do not handle this case well, because they are transmitted with every
  request.</p>

  <p>The <code id=introduction-15:dom-localstorage><a href=#dom-localstorage>localStorage</a></code> getter is used to access a page's local
  storage area.</p>

  <div class=example>
   <p>The site at example.com can display a count of how many times the user has loaded its page by
   putting the following at the bottom of its page:</p>

   <pre><code class='html'><c- p>&lt;</c-><c- f>p</c-><c- p>&gt;</c->
  You have viewed this page
  <c- p>&lt;</c-><c- f>span</c-> <c- e>id</c-><c- o>=</c-><c- s>&quot;count&quot;</c-><c- p>&gt;</c->an untold number of<c- p>&lt;/</c-><c- f>span</c-><c- p>&gt;</c->
  time(s).
<c- p>&lt;/</c-><c- f>p</c-><c- p>&gt;</c->
<c- p>&lt;</c-><c- f>script</c-><c- p>&gt;</c->
  <c- k>if</c-> <c- p>(</c-><c- o>!</c->localStorage<c- p>.</c->pageLoadCount<c- p>)</c->
    localStorage<c- p>.</c->pageLoadCount <c- o>=</c-> <c- mf>0</c-><c- p>;</c->
  localStorage<c- p>.</c->pageLoadCount <c- o>=</c-> parseInt<c- p>(</c->localStorage<c- p>.</c->pageLoadCount<c- p>)</c-> <c- o>+</c-> <c- mf>1</c-><c- p>;</c->
  document<c- p>.</c->getElementById<c- p>(</c-><c- t>&apos;count&apos;</c-><c- p>).</c->textContent <c- o>=</c-> localStorage<c- p>.</c->pageLoadCount<c- p>;</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>&gt;</c-></code></pre>
  </div>

  <p>Each site has its own separate storage area.</p>

  <p class=warning>The <code id=introduction-15:dom-localstorage-2><a href=#dom-localstorage>localStorage</a></code> getter provides access
  to shared state. This specification does not define the interaction with other agent clusters
  in a multiprocess user agent, and authors are encouraged to assume that there is no locking
  mechanism. A site could, for instance, try to read the value of a key, increment its value, then
  write it back out, using the new value as a unique identifier for the session; if the site does
  this twice in two different browser windows at the same time, it might end up using the same
  "unique" identifier for both sessions, with potentially disastrous effects.</p>




  <h3 id=storage><span class=secno>12.2</span> The API<a href=#storage class=self-link></a></h3><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Storage title="The Storage interface of the Web Storage API provides access to a particular domain's session or local storage. It allows, for example, the addition, modification, or deletion of stored data items.">Storage</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>6+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div>

  <h4 id=the-storage-interface><span class=secno>12.2.1</span> The <code id=the-storage-interface:storage-2><a href=#storage-2>Storage</a></code> interface<a href=#the-storage-interface class=self-link></a></h4>

  <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='storage-2' data-dfn-type='interface'><c- g>Storage</c-></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>unsigned</c-> <c- b>long</c-> <a href='#dom-storage-length' id='the-storage-interface:dom-storage-length'><c- g>length</c-></a>;
  <c- b>DOMString</c->? <a href='#dom-storage-key' id='the-storage-interface:dom-storage-key'><c- g>key</c-></a>(<c- b>unsigned</c-> <c- b>long</c-> <c- g>index</c->);
  <c- b>getter</c-> <c- b>DOMString</c->? <a href='#dom-storage-getitem' id='the-storage-interface:dom-storage-getitem'><c- g>getItem</c-></a>(<c- b>DOMString</c-> <c- g>key</c->);
  <c- b>setter</c-> <c- b>undefined</c-> <a href='#dom-storage-setitem' id='the-storage-interface:dom-storage-setitem'><c- g>setItem</c-></a>(<c- b>DOMString</c-> <c- g>key</c->, <c- b>DOMString</c-> <c- g>value</c->);
  <c- b>deleter</c-> <c- b>undefined</c-> <a href='#dom-storage-removeitem' id='the-storage-interface:dom-storage-removeitem'><c- g>removeItem</c-></a>(<c- b>DOMString</c-> <c- g>key</c->);
  <c- b>undefined</c-> <a href='#dom-storage-clear' id='the-storage-interface:dom-storage-clear'><c- g>clear</c-></a>();
};</code></pre>

  <dl class=domintro><dt><code><var>storage</var>.<a href=#dom-storage-length id=dom-storage-length-dev>length</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Storage/length title="The length read-only property of the Storage interface returns the number of data items stored in a given Storage object.">Storage/length</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>6+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><dd><p>Returns the number of key/value pairs.<dt><code><var>storage</var>.<a href=#dom-storage-key id=dom-storage-key-dev>key</a> (<var>n</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Storage/key title="The key() method of the Storage interface, when passed a number n, returns the name of the nth key in a given Storage object. The order of keys is user-agent defined, so you should not rely on it.">Storage/key</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>6+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><dd><p>Returns the name of the <var>n</var>th key, or null if <var>n</var> is greater than or
   equal to the number of key/value pairs.<dt><code><var>value</var> = <var>storage</var>.<a href=#dom-storage-getitem id=dom-storage-getitem-dev>getItem</a> (<var>key</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem title="The getItem() method of the Storage interface, when passed a key name, will return that key's value, or null if the key does not exist, in the given Storage object.">Storage/getItem</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>6+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><dt><code><var>value</var> = <var>storage</var>[<var>key</var>]</code><dd><p>Returns the current value associated with the given <var>key</var>, or null if the given
   <var>key</var> does not exist.<dt><code><var>storage</var>.<a href=#dom-storage-setitem id=dom-storage-setitem-dev>setItem</a> (<var>key</var>, <var>value</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem title="The setItem() method of the Storage interface, when passed a key name and value, will add that key to the given Storage object, or update that key's value if it already exists.">Storage/setItem</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>6+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><dt><code><var>storage</var>[<var>key</var>] = <var>value</var></code><dd>
    <p>Sets the value of the pair identified by <var>key</var> to <var>value</var>, creating a new
    key/value pair if none existed for <var>key</var> previously.</p>

    <p>Throws a <a id=the-storage-interface:quotaexceedederror href=https://webidl.spec.whatwg.org/#quotaexceedederror data-x-internal=quotaexceedederror>"<code>QuotaExceededError</code>"</a> <code id=the-storage-interface:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>
    if the new value couldn't be set. (Setting could fail if, e.g., the user has disabled storage
    for the site, or if the quota has been exceeded.)</p>

    <p>Dispatches a <code id=the-storage-interface:event-storage><a href=indices.html#event-storage>storage</a></code> event on <code id=the-storage-interface:window><a href=nav-history-apis.html#window>Window</a></code> objects
    holding an equivalent <code id=the-storage-interface:storage-2-2><a href=#storage-2>Storage</a></code> object.</p>
   <dt><code><var>storage</var>.<a href=#dom-storage-removeitem id=dom-storage-removeitem-dev>removeItem</a> (<var>key</var>)</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Storage/removeItem title="The removeItem() method of the Storage interface, when passed a key name, will remove that key from the given Storage object if it exists. The Storage interface of the Web Storage API provides access to a particular domain's session or local storage.">Storage/removeItem</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>6+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><dt><code id=the-storage-interface:delete><a data-x-internal=delete href=https://tc39.es/ecma262/#sec-delete-operator>delete</a></code> <var>storage</var>[<var>key</var>]<dd>
    <p>Removes the key/value pair with the given <var>key</var>, if a key/value pair with the given
    <var>key</var> exists.</p>

    <p>Dispatches a <code id=the-storage-interface:event-storage-2><a href=indices.html#event-storage>storage</a></code> event on <code id=the-storage-interface:window-2><a href=nav-history-apis.html#window>Window</a></code> objects
    holding an equivalent <code id=the-storage-interface:storage-2-3><a href=#storage-2>Storage</a></code> object.</p>
   <dt><code><var>storage</var>.<a href=#dom-storage-clear id=dom-storage-clear-dev>clear</a>()</code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Storage/clear title="The clear() method of the Storage interface clears all keys stored in a given Storage object.">Storage/clear</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android yes"><span>Firefox Android</span><span>6+</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><dd>
    <p>Removes all key/value pairs, if there are any.</p>

    <p>Dispatches a <code id=the-storage-interface:event-storage-3><a href=indices.html#event-storage>storage</a></code> event on <code id=the-storage-interface:window-3><a href=nav-history-apis.html#window>Window</a></code> objects
    holding an equivalent <code id=the-storage-interface:storage-2-4><a href=#storage-2>Storage</a></code> object.</p>
   </dl>

  

  <p>A <code id=the-storage-interface:storage-2-5><a href=#storage-2>Storage</a></code> object has an associated:</p>

  <dl><dt><dfn id=concept-storage-map>map</dfn>
   <dd>A <a id=the-storage-interface:storage-proxy-map href=https://storage.spec.whatwg.org/#storage-proxy-map data-x-internal=storage-proxy-map>storage proxy map</a>.<dt><dfn id=concept-storage-type>type</dfn>
   <dd>"<code>local</code>" or "<code>session</code>".
  </dl>

  <p>To <dfn id=concept-storage-reorder>reorder</dfn> a <code id=the-storage-interface:storage-2-6><a href=#storage-2>Storage</a></code> object
  <var>storage</var>, reorder <var>storage</var>'s <a href=#concept-storage-map id=the-storage-interface:concept-storage-map>map</a>'s
  <a href=https://infra.spec.whatwg.org/#map-entry id=the-storage-interface:map-entry data-x-internal=map-entry>entries</a> in an <a id=the-storage-interface:implementation-defined href=https://infra.spec.whatwg.org/#implementation-defined data-x-internal=implementation-defined>implementation-defined</a> manner.</p>

  <p class=note>Unfortunate as it is, iteration order is not defined and can change upon most
  mutations.</p>

  <p>To <dfn id=concept-storage-broadcast>broadcast</dfn> a <code id=the-storage-interface:storage-2-7><a href=#storage-2>Storage</a></code> object
  <var>storage</var>, given a <var>key</var>, <var>oldValue</var>, and <var>newValue</var>, run
  these steps:</p>

  <ol><li><p>Let <var>thisDocument</var> be <var>storage</var>'s <a id=the-storage-interface:concept-relevant-global href=webappapis.html#concept-relevant-global>relevant global object</a>'s <a href=nav-history-apis.html#concept-document-window id=the-storage-interface:concept-document-window>associated <code>Document</code></a>.<li><p>Let <var>url</var> be the <a href=https://url.spec.whatwg.org/#concept-url-serializer id=the-storage-interface:concept-url-serializer data-x-internal=concept-url-serializer>serialization</a> of
   <var>thisDocument</var>'s <a href=https://dom.spec.whatwg.org/#concept-document-url id="the-storage-interface:the-document's-address" data-x-internal="the-document's-address">URL</a>.<li>
    <p>Let <var>remoteStorages</var> be all <code id=the-storage-interface:storage-2-8><a href=#storage-2>Storage</a></code> objects excluding
    <var>storage</var> whose:</p>

    <ul><li><a href=#concept-storage-type id=the-storage-interface:concept-storage-type>type</a> is <var>storage</var>'s <a href=#concept-storage-type id=the-storage-interface:concept-storage-type-2>type</a><li><a id=the-storage-interface:relevant-settings-object href=webappapis.html#relevant-settings-object>relevant settings object</a>'s <a id=the-storage-interface:concept-origin href=browsers.html#concept-origin>origin</a> is <a id=the-storage-interface:same-origin href=browsers.html#same-origin>same origin</a>
     with <var>storage</var>'s <a id=the-storage-interface:relevant-settings-object-2 href=webappapis.html#relevant-settings-object>relevant settings object</a>'s <a id=the-storage-interface:concept-origin-2 href=browsers.html#concept-origin>origin</a></ul>

    <p>and, if <a href=#concept-storage-type id=the-storage-interface:concept-storage-type-3>type</a> is "<code>session</code>",
    whose <a id=the-storage-interface:relevant-settings-object-3 href=webappapis.html#relevant-settings-object>relevant settings object</a>'s <a href=nav-history-apis.html#concept-document-window id=the-storage-interface:concept-document-window-2>associated
    <code>Document</code></a>'s <a id=the-storage-interface:node-navigable href=document-sequences.html#node-navigable>node navigable</a>'s <a href=document-sequences.html#nav-traversable id=the-storage-interface:nav-traversable>traversable navigable</a> is <var>thisDocument</var>'s <a id=the-storage-interface:node-navigable-2 href=document-sequences.html#node-navigable>node
    navigable</a>'s <a href=document-sequences.html#nav-traversable id=the-storage-interface:nav-traversable-2>traversable navigable</a>.</p>
   <li>
    <p><a href=https://infra.spec.whatwg.org/#list-iterate id=the-storage-interface:list-iterate data-x-internal=list-iterate>For each</a> <var>remoteStorage</var> of
    <var>remoteStorages</var>: <a id=the-storage-interface:queue-a-global-task href=webappapis.html#queue-a-global-task>queue a global task</a> on the <a id=the-storage-interface:dom-manipulation-task-source href=webappapis.html#dom-manipulation-task-source>DOM manipulation task
    source</a> given <var>remoteStorage</var>'s <a id=the-storage-interface:concept-relevant-global-2 href=webappapis.html#concept-relevant-global>relevant global object</a> to <a href=https://dom.spec.whatwg.org/#concept-event-fire id=the-storage-interface:concept-event-fire data-x-internal=concept-event-fire>fire an event</a> named <code id=the-storage-interface:event-storage-4><a href=indices.html#event-storage>storage</a></code> at <var>remoteStorage</var>'s <a id=the-storage-interface:concept-relevant-global-3 href=webappapis.html#concept-relevant-global>relevant global
    object</a>, using <code id=the-storage-interface:storageevent><a href=#storageevent>StorageEvent</a></code>, with <code id=the-storage-interface:dom-storageevent-key><a href=#dom-storageevent-key>key</a></code> initialized to <var>key</var>, <code id=the-storage-interface:dom-storageevent-oldvalue><a href=#dom-storageevent-oldvalue>oldValue</a></code> initialized to <var>oldValue</var>, <code id=the-storage-interface:dom-storageevent-newvalue><a href=#dom-storageevent-newvalue>newValue</a></code> initialized to <var>newValue</var>, <code id=the-storage-interface:dom-storageevent-url><a href=#dom-storageevent-url>url</a></code> initialized to <var>url</var>, and <code id=the-storage-interface:dom-storageevent-storagearea><a href=#dom-storageevent-storagearea>storageArea</a></code> initialized to
    <var>remoteStorage</var>.</p>
    

    <p class=note>The <code id=the-storage-interface:document><a href=dom.html#document>Document</a></code> object associated with the resulting <a href=webappapis.html#concept-task id=the-storage-interface:concept-task>task</a> is not necessarily <a id=the-storage-interface:fully-active href=document-sequences.html#fully-active>fully active</a>, but events fired
    on such objects are ignored by the <a id=the-storage-interface:event-loop href=webappapis.html#event-loop>event loop</a> until the <code id=the-storage-interface:document-2><a href=dom.html#document>Document</a></code>
    becomes <a id=the-storage-interface:fully-active-2 href=document-sequences.html#fully-active>fully active</a> again.</p>
   </ol>

  <hr>

  <p>The <dfn data-dfn-for=Storage id=dom-storage-length data-dfn-type=attribute><code>length</code></dfn> getter
  steps are to return <a id=the-storage-interface:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-storage-map id=the-storage-interface:concept-storage-map-2>map</a>'s <a href=https://infra.spec.whatwg.org/#map-size id=the-storage-interface:map-size data-x-internal=map-size>size</a>.</p>

  <p>The <dfn data-dfn-for=Storage id=dom-storage-key data-dfn-type=method><code>key(<var>index</var>)</code></dfn>
  method steps are:</p>

  <ol><li><p>If <var>index</var> is greater than or equal to <a id=the-storage-interface:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-storage-map id=the-storage-interface:concept-storage-map-3>map</a>'s <a href=https://infra.spec.whatwg.org/#map-size id=the-storage-interface:map-size-2 data-x-internal=map-size>size</a>, then return
   null.<li><p>Let <var>keys</var> be the result of running <a href=https://infra.spec.whatwg.org/#map-getting-the-keys id=the-storage-interface:map-get-the-keys data-x-internal=map-get-the-keys>get the
   keys</a> on <a id=the-storage-interface:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-storage-map id=the-storage-interface:concept-storage-map-4>map</a>.

   <li><p>Return <var>keys</var>[<var>index</var>].</ol>

  <p>The <a id=the-storage-interface:supported-property-names href=https://webidl.spec.whatwg.org/#dfn-supported-property-names data-x-internal=supported-property-names>supported property names</a> on a <code id=the-storage-interface:storage-2-9><a href=#storage-2>Storage</a></code> object <var>storage</var>
  are the result of running <a href=https://infra.spec.whatwg.org/#map-getting-the-keys id=the-storage-interface:map-get-the-keys-2 data-x-internal=map-get-the-keys>get the keys</a> on
  <var>storage</var>'s <a href=#concept-storage-map id=the-storage-interface:concept-storage-map-5>map</a>.</p>

  <p>The <dfn data-dfn-for=Storage id=dom-storage-getitem data-dfn-type=method><code>getItem(<var>key</var>)</code></dfn> method steps are:</p>

  <ol><li><p>If <a id=the-storage-interface:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-storage-map id=the-storage-interface:concept-storage-map-6>map</a>[<var>key</var>] does
   not <a href=https://infra.spec.whatwg.org/#map-exists id=the-storage-interface:map-exists data-x-internal=map-exists>exist</a>, then return null.<li><p>Return <a id=the-storage-interface:this-5 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-storage-map id=the-storage-interface:concept-storage-map-7>map</a>[<var>key</var>].</ol>

  <p>The <dfn data-dfn-for=Storage id=dom-storage-setitem data-dfn-type=method><code>setItem(<var>key</var>,
  <var>value</var>)</code></dfn> method steps are:</p>

  <ol><li><p>Let <var>oldValue</var> be null.<li><p>Let <var>reorder</var> be true.<li>
    <p>If <a id=the-storage-interface:this-6 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-storage-map id=the-storage-interface:concept-storage-map-8>map</a>[<var>key</var>]
    <a href=https://infra.spec.whatwg.org/#map-exists id=the-storage-interface:map-exists-2 data-x-internal=map-exists>exists</a>:</p>

    <ol><li><p>Set <var>oldValue</var> to <a id=the-storage-interface:this-7 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-storage-map id=the-storage-interface:concept-storage-map-9>map</a>[<var>key</var>].<li><p>If <var>oldValue</var> <a id=the-storage-interface:is href=https://infra.spec.whatwg.org/#string-is data-x-internal=is>is</a> <var>value</var>, then return.<li><p>Set <var>reorder</var> to false.</ol>
   <li><p>If <var>value</var> cannot be stored, then throw a
   <a id=the-storage-interface:quotaexceedederror-2 href=https://webidl.spec.whatwg.org/#quotaexceedederror data-x-internal=quotaexceedederror>"<code>QuotaExceededError</code>"</a> <code id=the-storage-interface:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p><a href=https://infra.spec.whatwg.org/#map-set id=the-storage-interface:map-set data-x-internal=map-set>Set</a> <a id=the-storage-interface:this-8 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-storage-map id=the-storage-interface:concept-storage-map-10>map</a>[<var>key</var>] to <var>value</var>.<li><p>If <var>reorder</var> is true, then <a href=#concept-storage-reorder id=the-storage-interface:concept-storage-reorder>reorder</a>
   <a id=the-storage-interface:this-9 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.<li><p><a href=#concept-storage-broadcast id=the-storage-interface:concept-storage-broadcast>Broadcast</a> <a id=the-storage-interface:this-10 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> with
   <var>key</var>, <var>oldValue</var>, and <var>value</var>.</ol>

  <p>The <dfn data-dfn-for=Storage id=dom-storage-removeitem data-dfn-type=method><code>removeItem(<var>key</var>)</code></dfn> method steps are:</p>

  <ol><li><p>If <a id=the-storage-interface:this-11 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-storage-map id=the-storage-interface:concept-storage-map-11>map</a>[<var>key</var>] does
   not <a href=https://infra.spec.whatwg.org/#map-exists id=the-storage-interface:map-exists-3 data-x-internal=map-exists>exist</a>, then return.<li><p>Set <var>oldValue</var> to <a id=the-storage-interface:this-12 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-storage-map id=the-storage-interface:concept-storage-map-12>map</a>[<var>key</var>].<li><p><a href=https://infra.spec.whatwg.org/#map-remove id=the-storage-interface:map-remove data-x-internal=map-remove>Remove</a> <a id=the-storage-interface:this-13 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-storage-map id=the-storage-interface:concept-storage-map-13>map</a>[<var>key</var>].<li><p><a href=#concept-storage-reorder id=the-storage-interface:concept-storage-reorder-2>Reorder</a> <a id=the-storage-interface:this-14 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>.<li><p><a href=#concept-storage-broadcast id=the-storage-interface:concept-storage-broadcast-2>Broadcast</a> <a id=the-storage-interface:this-15 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> with
   <var>key</var>, <var>oldValue</var>, and null.</ol>

  <p>The <dfn data-dfn-for=Storage id=dom-storage-clear data-dfn-type=method><code>clear()</code></dfn> method
  steps are:</p>

  <ol><li><p><a href=https://infra.spec.whatwg.org/#map-clear id=the-storage-interface:map-clear data-x-internal=map-clear>Clear</a> <a id=the-storage-interface:this-16 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=#concept-storage-map id=the-storage-interface:concept-storage-map-14>map</a>.<li><p><a href=#concept-storage-broadcast id=the-storage-interface:concept-storage-broadcast-3>Broadcast</a> <a id=the-storage-interface:this-17 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a> with null,
   null, and null.</ol>

  


  <h4 id=the-sessionstorage-attribute><span class=secno>12.2.2</span> The <code id=the-sessionstorage-attribute:dom-sessionstorage><a href=#dom-sessionstorage>sessionStorage</a></code> getter<a href=#the-sessionstorage-attribute class=self-link></a></h4>

  <pre><code class='idl'><c- b>interface</c-> <c- b>mixin</c-> <dfn id='windowsessionstorage' data-dfn-type='interface'><c- g>WindowSessionStorage</c-></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a href='#storage-2' id='the-sessionstorage-attribute:storage-2'><c- n>Storage</c-></a> <a href='#dom-sessionstorage' id='the-sessionstorage-attribute:dom-sessionstorage-2'><c- g>sessionStorage</c-></a>;
};
<a id='the-sessionstorage-attribute:window' href='nav-history-apis.html#window'><c- n>Window</c-></a> <c- b>includes</c-> <a href='#windowsessionstorage' id='the-sessionstorage-attribute:windowsessionstorage'><c- n>WindowSessionStorage</c-></a>;</code></pre>

  <dl class=domintro><dt><code><var>window</var>.<a href=#dom-sessionstorage id=dom-sessionstorage-dev>sessionStorage</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage title="The read-only sessionStorage property accesses a session Storage object for the current origin. sessionStorage is similar to localStorage; the difference is that while data in localStorage doesn't expire, data in sessionStorage is cleared when the page session ends.">Window/sessionStorage</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>2+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><dd>
    <p>Returns the <code id=the-sessionstorage-attribute:storage-2-2><a href=#storage-2>Storage</a></code> object associated with that <var>window</var>'s origin's
    session storage area.</p>

    <p>Throws a <a id=the-sessionstorage-attribute:securityerror href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a> <code id=the-sessionstorage-attribute:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the
    <code id=the-sessionstorage-attribute:document><a href=dom.html#document>Document</a></code>'s <a href=https://dom.spec.whatwg.org/#concept-document-origin id=the-sessionstorage-attribute:concept-document-origin data-x-internal=concept-document-origin>origin</a> is an <a href=browsers.html#concept-origin-opaque id=the-sessionstorage-attribute:concept-origin-opaque>opaque origin</a> or if the request violates a policy decision
    (e.g., if the user agent is configured to not allow the page to persist data).</p>
   </dl>

  

  <p>A <code id=the-sessionstorage-attribute:document-2><a href=dom.html#document>Document</a></code> object has an associated <dfn id=session-storage-holder>session storage holder</dfn>, which is
  null or a <code id=the-sessionstorage-attribute:storage-2-3><a href=#storage-2>Storage</a></code> object. It is initially null.</p>

  <p>
  <a id=the-sessionstorage-attribute:tracking-vector title="There is a tracking vector here." href=https://infra.spec.whatwg.org/#tracking-vector class=tracking-vector data-x-internal=tracking-vector><img width=46 alt="(This is a tracking vector.)" crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/tracking-vector.svg height=64></a>
  The <dfn data-dfn-for=WindowSessionStorage id=dom-sessionstorage data-dfn-type=attribute><code>sessionStorage</code></dfn> getter steps are:</p>

  <ol><li><p>If <a id=the-sessionstorage-attribute:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=nav-history-apis.html#concept-document-window id=the-sessionstorage-attribute:concept-document-window>associated
   <code>Document</code></a>'s <a href=#session-storage-holder id=the-sessionstorage-attribute:session-storage-holder>session storage holder</a> is non-null, then return
   <a id=the-sessionstorage-attribute:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=nav-history-apis.html#concept-document-window id=the-sessionstorage-attribute:concept-document-window-2>associated
   <code>Document</code></a>'s <a href=#session-storage-holder id=the-sessionstorage-attribute:session-storage-holder-2>session storage holder</a>.<li><p>Let <var>map</var> be the result of running <a id=the-sessionstorage-attribute:obtain-a-session-storage-bottle-map href=https://storage.spec.whatwg.org/#obtain-a-session-storage-bottle-map data-x-internal=obtain-a-session-storage-bottle-map>obtain a session storage bottle
   map</a> with <a id=the-sessionstorage-attribute:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-sessionstorage-attribute:relevant-settings-object href=webappapis.html#relevant-settings-object>relevant settings object</a> and "<code>sessionStorage</code>".<li><p>If <var>map</var> is failure, then throw a <a id=the-sessionstorage-attribute:securityerror-2 href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a>
   <code id=the-sessionstorage-attribute:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Let <var>storage</var> be a new <code id=the-sessionstorage-attribute:storage-2-4><a href=#storage-2>Storage</a></code> object whose <a href=#concept-storage-map id=the-sessionstorage-attribute:concept-storage-map>map</a> is <var>map</var>.

   <li><p>Set <a id=the-sessionstorage-attribute:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=nav-history-apis.html#concept-document-window id=the-sessionstorage-attribute:concept-document-window-3>associated
   <code>Document</code></a>'s <a href=#session-storage-holder id=the-sessionstorage-attribute:session-storage-holder-3>session storage holder</a> to
   <var>storage</var>.<li><p>Return <var>storage</var>.</ol>

  <p class=note>After <a id=the-sessionstorage-attribute:creating-a-new-auxiliary-browsing-context href=document-sequences.html#creating-a-new-auxiliary-browsing-context>creating a new auxiliary browsing context and document</a>, the
  session storage <a href=document-sequences.html#copy-session-storage>is copied</a> over.</p>

  


  <h4 id=the-localstorage-attribute><span class=secno>12.2.3</span> The <code id=the-localstorage-attribute:dom-localstorage><a href=#dom-localstorage>localStorage</a></code> getter<a href=#the-localstorage-attribute class=self-link></a></h4>

  <pre><code class='idl'><c- b>interface</c-> <c- b>mixin</c-> <dfn id='windowlocalstorage' data-dfn-type='interface'><c- g>WindowLocalStorage</c-></dfn> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a href='#storage-2' id='the-localstorage-attribute:storage-2'><c- n>Storage</c-></a> <a href='#dom-localstorage' id='the-localstorage-attribute:dom-localstorage-2'><c- g>localStorage</c-></a>;
};
<a id='the-localstorage-attribute:window' href='nav-history-apis.html#window'><c- n>Window</c-></a> <c- b>includes</c-> <a href='#windowlocalstorage' id='the-localstorage-attribute:windowlocalstorage'><c- n>WindowLocalStorage</c-></a>;</code></pre>


  <dl class=domintro><dt><code><var>window</var>.<a href=#dom-localstorage id=dom-localstorage-dev>localStorage</a></code><div class="mdn-anno wrapped before"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage title="The localStorage read-only property of the window interface allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions.">Window/localStorage</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>3.5+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>4+</span></span><hr><span class="opera yes"><span>Opera</span><span>10.5+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>8+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios unknown"><span>Safari iOS</span><span>?</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>11+</span></span></div></div></div><dd>
    <p>Returns the <code id=the-localstorage-attribute:storage-2-2><a href=#storage-2>Storage</a></code> object associated with <var>window</var>'s origin's local
    storage area.</p>

    <p>Throws a <a id=the-localstorage-attribute:securityerror href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a> <code id=the-localstorage-attribute:domexception><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code> if the
    <code id=the-localstorage-attribute:document><a href=dom.html#document>Document</a></code>'s <a href=https://dom.spec.whatwg.org/#concept-document-origin id=the-localstorage-attribute:concept-document-origin data-x-internal=concept-document-origin>origin</a> is an <a href=browsers.html#concept-origin-opaque id=the-localstorage-attribute:concept-origin-opaque>opaque origin</a> or if the request violates a policy decision
    (e.g., if the user agent is configured to not allow the page to persist data).</p>
   </dl>

  

  <p>A <code id=the-localstorage-attribute:document-2><a href=dom.html#document>Document</a></code> object has an associated <dfn id=local-storage-holder>local storage holder</dfn>, which is null
  or a <code id=the-localstorage-attribute:storage-2-3><a href=#storage-2>Storage</a></code> object. It is initially null.</p>

  <p>
  <a id=the-localstorage-attribute:tracking-vector title="There is a tracking vector here." href=https://infra.spec.whatwg.org/#tracking-vector class=tracking-vector data-x-internal=tracking-vector><img width=46 alt="(This is a tracking vector.)" crossorigin="" class=darkmode-aware src=https://resources.whatwg.org/tracking-vector.svg height=64></a>
  The <dfn data-dfn-for=WindowLocalStorage id=dom-localstorage data-dfn-type=attribute><code>localStorage</code></dfn> getter steps are:</p>

  <ol><li><p>If <a id=the-localstorage-attribute:this href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=nav-history-apis.html#concept-document-window id=the-localstorage-attribute:concept-document-window>associated
   <code>Document</code></a>'s <a href=#local-storage-holder id=the-localstorage-attribute:local-storage-holder>local storage holder</a> is non-null, then return
   <a id=the-localstorage-attribute:this-2 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=nav-history-apis.html#concept-document-window id=the-localstorage-attribute:concept-document-window-2>associated
   <code>Document</code></a>'s <a href=#local-storage-holder id=the-localstorage-attribute:local-storage-holder-2>local storage holder</a>.<li><p>Let <var>map</var> be the result of running <a id=the-localstorage-attribute:obtain-a-local-storage-bottle-map href=https://storage.spec.whatwg.org/#obtain-a-local-storage-bottle-map data-x-internal=obtain-a-local-storage-bottle-map>obtain a local storage bottle map</a>
   with <a id=the-localstorage-attribute:this-3 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a id=the-localstorage-attribute:relevant-settings-object href=webappapis.html#relevant-settings-object>relevant settings object</a> and "<code>localStorage</code>".<li><p>If <var>map</var> is failure, then throw a <a id=the-localstorage-attribute:securityerror-2 href=https://webidl.spec.whatwg.org/#securityerror data-x-internal=securityerror>"<code>SecurityError</code>"</a>
   <code id=the-localstorage-attribute:domexception-2><a data-x-internal=domexception href=https://webidl.spec.whatwg.org/#dfn-DOMException>DOMException</a></code>.<li><p>Let <var>storage</var> be a new <code id=the-localstorage-attribute:storage-2-4><a href=#storage-2>Storage</a></code> object whose <a href=#concept-storage-map id=the-localstorage-attribute:concept-storage-map>map</a> is <var>map</var>.

   <li><p>Set <a id=the-localstorage-attribute:this-4 href=https://webidl.spec.whatwg.org/#this data-x-internal=this>this</a>'s <a href=nav-history-apis.html#concept-document-window id=the-localstorage-attribute:concept-document-window-3>associated
   <code>Document</code></a>'s <a href=#local-storage-holder id=the-localstorage-attribute:local-storage-holder-3>local storage holder</a> to <var>storage</var>.<li><p>Return <var>storage</var>.</ol>

  


  <h4 id=the-storageevent-interface><span class=secno>12.2.4</span> The <code id=the-storageevent-interface:storageevent><a href=#storageevent>StorageEvent</a></code> interface<a href=#the-storageevent-interface class=self-link></a></h4><div class="mdn-anno wrapped"><button onclick=toggleStatus(this) class=mdn-anno-btn><b title="Support in all current engines." class=all-engines-flag>✔</b><span>MDN</span></button><div class=feature><p><a href=https://developer.mozilla.org/en-US/docs/Web/API/StorageEvent title="The StorageEvent interface is implemented by the storage event, which is sent to a window when a storage area the window has access to is changed within the context of another document.">StorageEvent</a><p class=all-engines-text>Support in all current engines.<div class=support><span class="firefox yes"><span>Firefox</span><span>13+</span></span><span class="safari yes"><span>Safari</span><span>4+</span></span><span class="chrome yes"><span>Chrome</span><span>1+</span></span><hr><span class="opera yes"><span>Opera</span><span>12.1+</span></span><span class="edge_blink yes"><span>Edge</span><span>79+</span></span><hr><span class="edge yes"><span>Edge (Legacy)</span><span>12+</span></span><span class="ie yes"><span>Internet Explorer</span><span>9+</span></span><hr><span class="firefox_android unknown"><span>Firefox Android</span><span>?</span></span><span class="safari_ios yes"><span>Safari iOS</span><span>3+</span></span><span class="chrome_android unknown"><span>Chrome Android</span><span>?</span></span><span class="webview_android yes"><span>WebView Android</span><span>37+</span></span><span class="samsunginternet_android unknown"><span>Samsung Internet</span><span>?</span></span><span class="opera_android yes"><span>Opera Android</span><span>12.1+</span></span></div></div></div>

  <pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='storageevent' data-dfn-type='interface'><c- g>StorageEvent</c-></dfn> : <a id='the-storageevent-interface:event' href='https://dom.spec.whatwg.org/#interface-event' data-x-internal='event'><c- n>Event</c-></a> {
  <c- g>constructor</c->(<c- b>DOMString</c-> <c- g>type</c->, <c- b>optional</c-> <a href='#storageeventinit' id='the-storageevent-interface:storageeventinit'><c- n>StorageEventInit</c-></a> <c- g>eventInitDict</c-> = {});

  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c->? <a href='#dom-storageevent-key' id='the-storageevent-interface:dom-storageevent-key'><c- g>key</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c->? <a href='#dom-storageevent-oldvalue' id='the-storageevent-interface:dom-storageevent-oldvalue'><c- g>oldValue</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>DOMString</c->? <a href='#dom-storageevent-newvalue' id='the-storageevent-interface:dom-storageevent-newvalue'><c- g>newValue</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>USVString</c-> <a href='#dom-storageevent-url' id='the-storageevent-interface:dom-storageevent-url'><c- g>url</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a href='#storage-2' id='the-storageevent-interface:storage-2'><c- n>Storage</c-></a>? <a href='#dom-storageevent-storagearea' id='the-storageevent-interface:dom-storageevent-storagearea'><c- g>storageArea</c-></a>;

  <c- b>undefined</c-> <a href='#dom-storageevent-initstorageevent' id='the-storageevent-interface:dom-storageevent-initstorageevent'><c- g>initStorageEvent</c-></a>(<c- b>DOMString</c-> <c- g>type</c->, <c- b>optional</c-> <c- b>boolean</c-> <c- g>bubbles</c-> = <c- b>false</c->, <c- b>optional</c-> <c- b>boolean</c-> <c- g>cancelable</c-> = <c- b>false</c->, <c- b>optional</c-> <c- b>DOMString</c->? <c- g>key</c-> = <c- b>null</c->, <c- b>optional</c-> <c- b>DOMString</c->? <c- g>oldValue</c-> = <c- b>null</c->, <c- b>optional</c-> <c- b>DOMString</c->? <c- g>newValue</c-> = <c- b>null</c->, <c- b>optional</c-> <c- b>USVString</c-> <c- g>url</c-> = &quot;&quot;, <c- b>optional</c-> <c- n>Storage</c->? <c- g>storageArea</c-> = <c- b>null</c->);
};

<c- b>dictionary</c-> <dfn id='storageeventinit' data-dfn-type='dictionary'><c- g>StorageEventInit</c-></dfn> : <a id='the-storageevent-interface:eventinit' href='https://dom.spec.whatwg.org/#dictdef-eventinit' data-x-internal='eventinit'><c- n>EventInit</c-></a> {
  <c- b>DOMString</c->? <c- g>key</c-> = <c- b>null</c->;
  <c- b>DOMString</c->? <c- g>oldValue</c-> = <c- b>null</c->;
  <c- b>DOMString</c->? <c- g>newValue</c-> = <c- b>null</c->;
  <c- b>USVString</c-> <c- g>url</c-> = &quot;&quot;;
  <a href='#storage-2' id='the-storageevent-interface:storage-2-2'><c- n>Storage</c-></a>? <c- g>storageArea</c-> = <c- b>null</c->;
};</code></pre>

  <dl class=domintro><dt><code><var>event</var>.<a href=#dom-storageevent-key id=dom-storageevent-key-dev>key</a></code><dd><p>Returns the key of the storage item being changed.<dt><code><var>event</var>.<a href=#dom-storageevent-oldvalue id=dom-storageevent-oldvalue-dev>oldValue</a></code><dd><p>Returns the old value of the key of the storage item whose value is being
   changed.<dt><code><var>event</var>.<a href=#dom-storageevent-newvalue id=dom-storageevent-newvalue-dev>newValue</a></code><dd><p>Returns the new value of the key of the storage item whose value is being
   changed.<dt><code><var>event</var>.<a href=#dom-storageevent-url id=dom-storageevent-url-dev>url</a></code><dd><p>Returns the <a href=https://dom.spec.whatwg.org/#concept-document-url id="the-storageevent-interface:the-document's-address" data-x-internal="the-document's-address">URL</a> of the document whose storage
   item changed.<dt><code><var>event</var>.<a href=#dom-storageevent-storagearea id=dom-storageevent-storagearea-dev>storageArea</a></code><dd><p>Returns the <code id=the-storageevent-interface:storage-2-3><a href=#storage-2>Storage</a></code> object that was affected.</dl>

  

  <p>The <dfn data-dfn-for=StorageEvent id=dom-storageevent-key data-dfn-type=attribute><code>key</code></dfn>,
  <dfn data-dfn-for=StorageEvent id=dom-storageevent-oldvalue data-dfn-type=attribute><code>oldValue</code></dfn>,
  <dfn data-dfn-for=StorageEvent id=dom-storageevent-newvalue data-dfn-type=attribute><code>newValue</code></dfn>,
  <dfn data-dfn-for=StorageEvent id=dom-storageevent-url data-dfn-type=attribute><code>url</code></dfn>, and <dfn data-dfn-for=StorageEvent id=dom-storageevent-storagearea data-dfn-type=attribute><code>storageArea</code></dfn>
  attributes must return the values they were initialized to.</p>

  
  <p>The <dfn data-dfn-for=StorageEvent id=dom-storageevent-initstorageevent data-dfn-type=method><code>initStorageEvent(<var>type</var>, <var>bubbles</var>,
  <var>cancelable</var>, <var>key</var>, <var>oldValue</var>, <var>newValue</var>, <var>url</var>,
  <var>storageArea</var>)</code></dfn> method must initialize the event in a manner analogous to the
  similarly-named <code id=the-storageevent-interface:dom-event-initevent><a data-x-internal=dom-event-initevent href=https://dom.spec.whatwg.org/#dom-event-initevent>initEvent()</a></code> method. <a href=references.html#refsDOM>[DOM]</a></p>

  


  <h3 id=privacy><span class=secno>12.3</span> Privacy<a href=#privacy class=self-link></a></h3>

  <h4 id=user-tracking><span class=secno>12.3.1</span> User tracking<a href=#user-tracking class=self-link></a></h4>

  <p>A third-party advertiser (or any entity capable of getting content distributed to multiple
  sites) could use a unique identifier stored in its local storage area to track a user across
  multiple sessions, building a profile of the user's interests to allow for highly targeted
  advertising. In conjunction with a site that is aware of the user's real identity (for example an
  e-commerce site that requires authenticated credentials), this could allow oppressive groups to
  target individuals with greater accuracy than in a world with purely anonymous web usage.</p>

  <p>There are a number of techniques that can be used to mitigate the risk of user tracking:</p>

  <dl><dt>Blocking third-party storage<dd>
    <p>User agents may restrict access to the <code id=user-tracking:dom-localstorage><a href=#dom-localstorage>localStorage</a></code>
    objects to scripts originating at the domain of the <a href=document-sequences.html#nav-document id=user-tracking:nav-document>active
    document</a> of the <a id=user-tracking:top-level-traversable href=document-sequences.html#top-level-traversable>top-level traversable</a>, for instance denying access to the
    API for pages from other domains running in <code id=user-tracking:the-iframe-element><a href=iframe-embed-object.html#the-iframe-element>iframe</a></code>s.</p>
   <dt>Expiring stored data<dd>
    <p>User agents may, possibly in a manner configured by the user, automatically delete stored
    data after a period of time.</p>

    <p>For example, a user agent could be configured to treat third-party local storage areas as
    session-only storage, deleting the data once the user had closed all the <a href=document-sequences.html#navigable id=user-tracking:navigable>navigables</a> that could access it.</p>

    <p>This can restrict the ability of a site to track a user, as the site would then only be able
    to track the user across multiple sessions when they authenticate with the site itself (e.g. by
    making a purchase or logging in to a service).</p>

    <p>However, this also reduces the usefulness of the API as a long-term storage mechanism. It can
    also put the user's data at risk, if the user does not fully understand the implications of data
    expiration.</p>
   <dt>Treating persistent storage as cookies<dd>
    <p>If users attempt to protect their privacy by clearing cookies without also clearing data
    stored in the local storage area, sites can defeat those attempts by using the two features as
    redundant backup for each other. User agents should present the interfaces for clearing these in
    a way that helps users to understand this possibility and enables them to delete data in all
    persistent storage features simultaneously. <a href=references.html#refsCOOKIES>[COOKIES]</a></p>
   <dt>Site-specific safelisting of access to local storage areas<dd>
    <p>User agents may allow sites to access session storage areas in
    an unrestricted manner, but require the user to authorize access
    to local storage areas.</p>
   <dt>Origin-tracking of stored data<dd>
    <p>User agents may record the <a href=browsers.html#concept-origin id=user-tracking:concept-origin>origins</a> of sites that contained
    content from third-party origins that caused data to be stored.</p>

    <p>If this information is then used to present the view of data currently in persistent storage,
    it would allow the user to make informed decisions about which parts of the persistent storage
    to prune. Combined with a blocklist ("delete this data and prevent this domain from ever storing
    data again"), the user can restrict the use of persistent storage to sites that they trust.</p>
   <dt>Shared blocklists<dd>
    <p>User agents may allow users to share their persistent storage domain blocklists.</p>

    <p>This would allow communities to act together to protect their privacy.</p>
   </dl>

  <p>While these suggestions prevent trivial use of this API for user tracking, they do not block it
  altogether. Within a single domain, a site can continue to track the user during a session, and
  can then pass all this information to the third party along with any identifying information
  (names, credit card numbers, addresses) obtained by the site. If a third party cooperates with
  multiple sites to obtain such information, a profile can still be created.</p>

  <p>However, user tracking is to some extent possible even with no cooperation from the user agent
  whatsoever, for instance by using session identifiers in URLs, a technique already commonly used
  for innocuous purposes but easily repurposed for user tracking (even retroactively). This
  information can then be shared with other sites, using visitors' IP addresses and other
  user-specific data (e.g. user-agent headers and configuration settings) to combine separate
  sessions into coherent user profiles.</p>

  

  <h4 id=sensitivity-of-data><span class=secno>12.3.2</span> Sensitivity of data<a href=#sensitivity-of-data class=self-link></a></h4>

  <p>User agents should treat persistently stored data as potentially sensitive; it's quite possible
  for emails, calendar appointments, health records, or other confidential documents to be stored
  in this mechanism.</p>

  <p>To this end, user agents should ensure that when deleting data, it is promptly deleted from the
  underlying storage.</p>

  


  <h3 id=security-storage><span class=secno>12.4</span> Security<a href=#security-storage class=self-link></a></h3>

  <h4 id=dns-spoofing-attacks><span class=secno>12.4.1</span> DNS spoofing attacks<a href=#dns-spoofing-attacks class=self-link></a></h4>

  <p>Because of the potential for DNS spoofing attacks, one cannot guarantee that a host claiming to
  be in a certain domain really is from that domain. To mitigate this, pages can use TLS. Pages
  using TLS can be sure that only the user, software working on behalf of the user, and other pages
  using TLS that have certificates identifying them as being from the same domain, can access their
  storage areas.</p>


  <h4 id=cross-directory-attacks><span class=secno>12.4.2</span> Cross-directory attacks<a href=#cross-directory-attacks class=self-link></a></h4>

  <p>Different authors sharing one host name, for example users hosting content on the now defunct
  <code>geocities.com</code>, all share one local storage object. There is no feature to
  restrict the access by pathname. Authors on shared hosts are therefore urged to avoid using these
  features, as it would be trivial for other authors to read the data and overwrite it.</p>

  <p class=note>Even if a path-restriction feature was made available, the usual DOM scripting
  security model would make it trivial to bypass this protection and access the data from any
  path.</p>


  

  <h4 id=implementation-risks><span class=secno>12.4.3</span> Implementation risks<a href=#implementation-risks class=self-link></a></h4>

  <p>The two primary risks when implementing these persistent storage features are letting hostile
  sites read information from other domains, and letting hostile sites write information that is
  then read from other domains.</p>

  <p>Letting third-party sites read data that is not supposed to be read from their domain causes
  <em>information leakage</em>. For example, a user's shopping wishlist on one domain could be used
  by another domain for targeted advertising; or a user's work-in-progress confidential documents
  stored by a word-processing site could be examined by the site of a competing company.</p>

  <p>Letting third-party sites write data to the persistent storage of other domains can result in
  <em>information spoofing</em>, which is equally dangerous. For example, a hostile site could add
  items to a user's wishlist; or a hostile site could set a user's session identifier to a known ID
  that the hostile site can then use to track the user's actions on the victim site.</p>

  <p>Thus, strictly following the <a id=implementation-risks:concept-origin href=browsers.html#concept-origin>origin</a> model described in this specification is
  important for user security.</p>

  



  <nav><a href=worklets.html>← 11 Worklets</a> — <a href=index.html>Table of Contents</a> — <a href=syntax.html>13 The HTML syntax →</a></nav>
